import { Row, LinkBox } from 'components/Markdown/LinkBox'
import UnderstandPrismaIcon from 'icons/explore/UnderstandPrismaIcon'
import DevelopServiceIcon from 'icons/explore/DevelopServiceIcon'
import UseApiIcon from 'icons/explore/UseApiIcon'
import RunServerIcon from 'icons/explore/RunServerIcon'
import RowLink from 'components/blocks/WhiteBox/RowLink'

export const meta = {
  title: 'Explore Features',
  description: 'Congratulations for finishing the quickstart tutorial and building your first GraphQL server with Prisma! Here is where you can go next.',
  position: 4,
  wide: true,
  articleGroup: 'Explore Features',
}

<Row>
  <LinkBox
    title="Understand Prisma"
    description="Learn Prisma’s most important concepts and how everything fits together."
    icon={<UnderstandPrismaIcon />}>
    <RowLink
      text="Prisma Intro: What, Why & How"
      href="/-j9ff/" />
    <RowLink
      text="Basics: Datamodel, Prisma Client & Server"
      href="/-fgz4" />
    <RowLink
      text="Prisma under the Hood"
      href="/-j8ff" />
  </LinkBox>

  <LinkBox
    title="Explore Prisma 2"
    description="Prisma 2 is the new version of Prisma"
    icon={<DevelopServiceIcon />}>
    <RowLink
      text="GitHub & Docs"
      href="https://www.github.com/prisma/prisma2/" />
    <RowLink
      text="Prisma Client JS"
      href="https://www.github.com/prisma/photonjs/" />
    <RowLink
      text="Prisma Migrate"
      href="https://www.github.com/prisma/lift/" />
    <RowLink
      text="Quickstart"
      href="https://www.prisma.io/docs/getting-started/quickstart-typescript" />
  </LinkBox>
</Row>